<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title></title>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}"/>

    <!--		jquery 标签输入框插件-->
    <link th:href="@{/back/plugins/tagsinput/jquery.tagsinput.css}" rel="stylesheet"/>
    <style>
        h1{
            margin-top: 200px;
            color: #5FB878;
        }
        .layui-card-body{
            height: 150px;
        }
        #btns{
            width: 360px;
            height: 38px;
            margin-left: 900px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <form method="post" th:action="@{/modifyDraft}" id="global-form">
        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-body">
                    <input type="hidden" name="editArticleId" id="editArticleId">
                    <span style="color: green;font-size: 22px">编辑草稿</span>
                    <br/>
                    标题：<br/>
                    <input id="title" name="title" class="layui-input" type="text" style="width: 40%" required>
                    标签：<br/>
                    <input class="layui-input" name="tags" type="text" id="tags" style="width: 40%" required>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"><span style="color: green;font-size: 15px;">文章编辑器</span></div>
                <div class="layui-card-body">
                    <textarea name="ct" id="edit" cols="30" rows="10" required></textarea>
                    <div id="btns">

                        <div class="layui-btn-group layui-btn-primary" style="margin-top: 10px">
                            <a href="#" class="layui-btn layui-btn-radius" target="_blank">返回列表</a>
                        </div>
                        <div class="layui-btn-group" style="margin-top: 10px">
                            <button lay-submit lay-filter="submit01" class="layui-btn layui-btn-warm layui-btn-radius" target="_blank">发布文章</button>
                        </div>
                        <div class="layui-btn-group" style="margin-top: 10px">
                            <button lay-submit lay-filter="submit02"  class="layui-btn layui-btn-radius" target="_blank">保存草稿</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </form>

</div>
<script th:src="@{/component/pear/module/tinymce/tinymce.js}"></script>
<script th:src="@{/back/plugins/tagsinput/jquery.tagsinput.min.js}"></script>
<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script th:inline="javascript">
    var myedit=null;
    // 获取<meta>标签中封装的_csrf信息 ,否则会请求403
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var headers = {"X-CSRF-TOKEN": token}

    layui.use(['tinymce'], function() {
        var tinymce = layui.tinymce
        var edit = tinymce.render({
            elem: "#edit",
            height: 400
        });
        myedit=edit;
    });


    // Tags Input
    $('#tags').tagsInput({
        width: '39%',
        height: '35px',
        defaultText: '请输入文章标签',
        interactive:true,
        removeWithBackspace : true
    });

    $('#tags_tag').css('width','90.4px');



    setTimeout(() => {
        //编辑草稿的数据填充
        var articleContent=[[${contents}]];
        if(articleContent!=null){
            $('#editArticleId').val(articleContent.id);
            $('#title').val(articleContent.title);
            $('#tags').importTags(articleContent.tags);
            tinymce.activeEditor.setContent(articleContent.content);
        }
    }, 850);


    setTimeout(() => {


        layui.use('form', function(){
            var form = layui.form;

                form.on('submit(submit01)', function (data) {
                    layer.confirm('您确定要发布吗?', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        layer.close(index);
                        let loading = layer.load();
                        var data = $.param({
                            "content" : myedit.getContent()
                        }) + "&" +$('#global-form').serialize();
                        $.ajax({
                            url: "/pear/draft/publish",
                            data: data,  //ajax提交表单
                            dataType: 'json',
                            type: 'POST',
                            headers: headers,
                            async:false,
                            success: function (result) {
                                layer.close(loading);
                                if (result.success) {
                                    layer.msg(result.msg, {
                                        icon: 1,
                                        time: 1000
                                    });
                                    window.location.href='/pear/toDraft'
                                } else {
                                    layer.msg(result.msg, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    })
                    return false;
                });



            form.on('submit(submit02)', function (data) {
                layer.confirm('您确定要保存草稿吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    let loading = layer.load();
                    var data = $.param({
                        "content" : myedit.getContent()
                    }) + "&" +$('#global-form').serialize();
                    $.ajax({
                        url: "/pear/modifyDraft",
                        data: data,  //ajax提交表单
                        dataType: 'json',
                        type: 'POST',
                        headers: headers,
                        async:false,
                        success: function (result) {
                            layer.close(loading);
                            if (result.success) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                });
                                window.location.href='/pear/toDraft'
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                })
                return false;
            });



        });


    }, 900);







</script>
</body>




</html>
